<template>
  <div class="page">


    <van-row   align="center" class="toolbar">

      <van-col span="8">
        <van-icon name="arrow-left" size="24"
                  @click="onClickLeft"/>

      </van-col>


      <van-col span="8">
        <div style="width: 100%;text-align: center">{{ title }}</div>
      </van-col>
      <van-col span="8">
      <van-row justify="end">

        <van-icon v-if="name" :name="name" size="24" class="icon_padding"
                  ref="img2" @click="handleToolbarClick"/>
        <van-icon v-if="name2" size="24" :name="name2" ref="img2" class="icon_padding"
                  @click="handleToolbarClick2"/>
      </van-row>
      </van-col>
    </van-row>


    <div class="scroll-container">
      <slot name="container"  >
      </slot>
    </div>


  </div>

  <!--  -->
  <!--  @click-right="onClickRight"-->
</template>


<script setup>
import {reactive} from 'vue';

let props = defineProps({
  toolbar: {
    type: Object,
    default: {
      title: "标题",
      name: "scan",
      name2: "icon_save.png",
      handleToolbarClick: function () {
      },
      handleToolbarClick2: function () {
      },

    }
  },
})


let {title, name, name2, handleToolbarClick, handleToolbarClick2} = reactive(props.toolbar)


const onClickLeft = () => history.back();

</script>


<style>

.page {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

.icon_padding {
  padding: 6px;
}

.toolbar {
  padding: 0 8px;
  height: 44px;
  background-color: #0C9AF5;
  color:#fff;
}
.scroll-container{
  flex:1;
  background-color: #0f0;
  overflow-y: scroll;
}
</style>